<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	#input-char,#output
	{
		width:300px;
		height:100px;
	}
	input[type=number],.number
	{
		width:50px;
	}
	#tb
	{
		list-style-type: none;
		padding: 0;
		margin: 0;
		width: 600px;
	}
	#tb li
	{
		width: 280px;
		display: inline-block;
	}
</style>
</head>

<body>
	<div><label>输入角色信息JSON<br><textarea id="input-char"></textarea></label><input type="button" value="读取信息" onclick="load()"></div>
	<div>姓名<input id="name" type="text">卡ID<input id="card" type="text"></div>
	<ul id="tb">
		<li></li>
	</ul>
	<div><label>输出信息<br><textarea id="output"></textarea></label></div>
	<script type="text/javascript">
		var tb = document.querySelector("#tb");
		var valueArr = [
			["剩余点数","feat"],
			["力量","atk_mel"],
			["灵力","atk_rang"],
			["生命","hp"],
			["防御","def"],
			["命中","hitrate"],
			["回避","avoid"],
			["暴击","crit"],
			["幸运","lucky"],
		];
		valueArr.forEach(function(item){
			document.createTextNode
			var li = document.createElement("li");
			var nodeArr = [
				document.createTextNode(item[0]),
				document.createTextNode("+"),
				document.createTextNode("="),
			]
			var str1 = document.createTextNode(item[0]);
			li.appendChild(str1);
			var ipt1 = document.createElement("input");
			ipt1.type = "number";
			ipt1.id = item[1] + "_now";
			ipt1.onchange = function(){jisuan(true)};
			ipt1.min = 0;
			if (item[1]=="hp") ipt1.step = "5";
			li.appendChild(ipt1);

			var str2 = document.createTextNode(item[1]=="feat"?"-":"+");
			li.appendChild(str2);
			var ipt2 = document.createElement("input");
			ipt2.type = "number";
			ipt2.id = item[1] + "_add";
			ipt2.onchange = function(){jisuan(true)};
			ipt2.min = 0;
			if (item[1]=="hp") ipt2.step = "5";
			if (item[1]=="feat") ipt2.disabled = "true";
			li.appendChild(ipt2);

			var str3 = document.createTextNode("=");
			li.appendChild(str3);
			var ipt3 = document.createElement("input");
			ipt3.type = item[1]=="feat"?"text":"number";
			ipt3.className="number";
			if (item[1]=="hp") ipt3.step = "5";
			if (item[1]=="feat") ipt3.disabled = "true";
			//ipt3.disabled = "true";
			ipt3.id = item[1] + "_new";
			ipt3.onchange = function(){jisuan(false)};
			li.appendChild(ipt3);

			var str4 = document.createElement("span");
			str4.id = item[1] + "_need";
			li.appendChild(str4);
			
			tb.appendChild(li);
		})
		function load()
		{
			var input_char = document.querySelector("#input-char");
			var jo = JSON.parse(input_char.value);
			document.querySelector("#name").value = jo.cardname;
			document.querySelector("#card").value = jo.cardid;
			valueArr.forEach(function(item){
				document.querySelector("#" + item[1] + "_now").value = jo[item[1]];
				document.querySelector("#" + item[1] + "_add").value = 0;
			})
			jisuan(true);
		}

		function calculate_feat(now,add,hp=false)
		{
			if(hp)
			{
				now /= 5;
				add /= 5;
			}
			
			var basicP = (parseInt(now/10) + 1); //目前基础加一点需要使用的点数
			var remainderTime = 10-(now%10); //到下一级别剩余的点数

			var needF = 0;
			if (add <= remainderTime) //如果还没增加到下一个10级
			{
				needF+=add*basicP; //只计算增加点数需要的点数
			}else
			{
				needF += remainderTime*basicP; //到下一个10级之前的点数
				var addF0 = add - remainderTime; //剩下从0开始的新点
				var full10 = parseInt(addF0/10); //完整的10点有几次
				for (var i=0;i<full10;i++)
				{
					needF += (basicP+i+1) * 10; //每10级需要的点数
				}
				needF += (basicP+full10+1) * (addF0%10); //加上剩下的点
			}
			return {total:needF,level:((basicP+full10+1)||basicP)};
		}
		function jisuan(isAdd=true)
		{
			var feat = valueArr[0];
			var feat_now = parseInt(document.querySelector("#" + feat[1] + "_now").value); //现在的数值
			var feat_add = 0;
			
			var outStrArr = [
				["cardid",document.querySelector("#card").value],
			];
			for (var i =1;i<valueArr.length;i++)
			{
				var item = valueArr[i];
				var now = parseInt(document.querySelector("#" + item[1] + "_now").value); //现在的数值
				if (isAdd)
				{
					var add = (parseInt(document.querySelector("#" + item[1] + "_add").value)||0); //增加的数值
					var newV = now + add;
					document.querySelector("#" + item[1] + "_new").value = newV; //新的数值
				}else
				{
					var newV = (parseInt(document.querySelector("#" + item[1] + "_new").value)||0); //新的的数值
					var add = newV - now;
					document.querySelector("#" + item[1] + "_add").value = add; //新的数值
				}
				var needPoint = calculate_feat(now,add,item[1]=="hp");
				feat_add += needPoint.total;
				//console.log(needPoint)
				document.querySelector("#" + item[1] + "_need").innerHTML = ["(",needPoint.level,")"].join(""); //需要的点数
				
				outStrArr.push([item[1],newV]);
			}
			document.querySelector("#" + feat[1] + "_add").value = feat_add;
			var newfeatV = feat_now - feat_add;
			
			outStrArr.push([feat[1],newfeatV]);
			var outStr = outStrArr.map(function(item){return item.join("=")}).join("&");
			document.querySelector("#output").value = outStr;
			
			var info = document.querySelector("#" + feat[1] + "_new");
			
			feat_new.value = (newfeatV>-32767)?newfeatV:"点数超标";
		}
	</script>
</body>
</html>
